<template>
  <div class="wrapper">
    <ul class="menu">
      <router-link tag="li" :to="'/viewShop/'">
        <img src="~@/assets/img/home_seeShop.png">
        <div>查看商铺</div>
      </router-link>
      <router-link tag="li" :to="'/transfer/0'">
        <img src="~@/assets/img/home_transfer.png">
        <div>极速转铺</div>
      </router-link>
      <router-link tag="li" :to="'/wanted/0'">
        <img src="~@/assets/img/home_looking.png">
        <div>极速找铺</div>
      </router-link>
      <router-link tag="li" :to="'/rentShop/'">
        <img src="~@/assets/img/home_ask.png">
        <div>求租专区</div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CompanyMenu'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
    width 100%
.menu
    width 100%
    display flex
    margin-top .5rem /* 25/50 */
    margin-bottom .5rem /* 25/50 */
    li
      width 25%
      text-align center
      font-size .26rem /* 13/50 */
      img
        width 1.1rem /* 55/50 */
        height 1.1rem /* 55/50 */
        margin-bottom .22rem /* 11/50 */
        border-radius .46rem /* 23/50 */
    li:nth-child(1)
      img
        box-shadow 0px 3px 5px 0px rgba(207, 13, 39, 0.35)
    li:nth-child(2)
      img
        box-shadow 0px 3px 5px 0px rgba(253, 153, 9, 0.35)
    li:nth-child(3)
      img
        box-shadow 0px 3px 5px 0px rgba(54, 140, 248, 0.35)
    li:nth-child(4)
      img
        box-shadow 0px 3px 5px 0px rgba(96, 67, 235, 0.35)
</style>
